13 Exos TP CSS

Reprendre le travail fait dans la Partie 1 : 10 - Exos - TP HTML

Partie 2 : La mise en forme

Exercice 8

Compléter le fichier style.css afin de respecter les règles suivantes :

• La police de caractère doit être une police sans empattement de taille 16px.
• Le site doit s’étendre sur une largeur de 1130px.
• Le site doit avoir un fond d’une couleur très claire au choix (Exemples de couleurs).
• Le titre doit être de grande taille (entre 36px et 48px), d’une police avec empattement et en italique.
• Le menu doit etre placé verticalement à gauche de la page avec une largeur convenable (en px ou en %). Il doit avoir une couleur de fond différente du reste de la page.
• Chaque élément du menu doit être centré horizontalement.
• Au survol, chaque élément du menu doit passer en bleu foncé. Voir ce lien.
• Le soulignement des liens hypertextes de tout le document doit disparaître.
• Le lien « En savoir plus » doit etre en bleu et aligné à droite sous l’article.
• Mettre en forme la barre latérale à droite de la page.
• L’image sera en haut de la barre de menu et arrondie grâce à du code css.

Animations

Exercice 9

En vous aidant de ce site, créer des effets d’animations.

Vue adaptive

Exercice 10

1. Lire cet article sur la balise meta viewport puis mettre en place la balise viewport.
2. Pour les tablettes et les smartphones, il est nécessaire de faire des ajustements afin que l’affichage soit optimisé. Le code css suivant permet de le faire.

CSS

@media screen and (max-width: 630px) {
  body {
    font-size: 6px;
  }
  nav {
    display: none;
  }
}

Quel effet précis a le code ci-dessus ?
On peut tester l'adaptation en modifiant la taille de la fenêtre du navigateur.
Ou mieux, depuis le navigateur avec F12 puis en cliquant sur l'icone de tablette , et on choisit un modèle de tablette/smartphone, ou une taille d'écran.

3. S’en inspirer pour adapter votre site aux écrans des tablettes et des smartphones (par exemple, sur un écran peu large de smartphone, faire disparaitre les deux menus de gauche et de droite, et s'assurer que la partie principale prend toute la place).

Exemple de site